<!-- 收益 -->
<template>
  <view class="profit-wrapper">
		<view class="jiebei-wrapper">
		  <view class="info">
		    <view class="left">
		      <text class="name">当前可提现金额</text>
		      <view class="nums-wrapper">
		        <text class="nums">¥{{ userStore.userInfo.current_money || 0 }}</text>
		      </view>
		    </view>
		    <view class="right" @click="apply()">
		      <text>申请提现</text>
		    </view>
		  </view>
		  <view class="withdraw-wrapepr">
		    <view class="item">
		      <text class="title">总收入</text>
		      <text class="note">¥{{ userStore.userInfo.total_money }}</text>
		    </view>
		    <view class="item">
		      <text class="title">总支出</text>
		      <text class="note">¥{{ userStore.userInfo.total_pay }}</text>
		    </view>
		  </view>
		</view>
		<!-- 	修改资料 -->
		<view class="modify-wrapper">
			<view class="inner-wrapper">
				<view class="item" @click="$navTo('/pages/mine/profit/personalAuth?isEdit=1')">
					<image class="icon" src="/static/icons/modify.svg" mode=""></image>
					<text>修改账户资料</text>
				</view>
				<view class="item" @click="$navTo('/pages/mine/profit/withdrawalRecord')">
					<image class="icon" src="/static/icons/record.svg" mode=""></image>
					<text>提现记录</text>
				</view>
			</view>
		</view>
		
		<view class="profit-detail">
			<view class="title">收入明细</view>
			<view class="verify-btn" @click="raffleVerify"></view>
			<block-view padding-top="0">
				<view class="header-wrapper">
					<view class="left" @click="$popupChange(this, 'dataPicker', 'open')">
						<text class="date">{{ dateTime }}</text>
						<uni-icons type="bottom" :size="16" color="#333"></uni-icons>
					</view>
					<view class="right">
						<text>当月总收入：</text>
						<text>{{ income.total }}</text>
					</view>
				</view>
				<income-item v-for="(item,index) in income.data" :key="index" :info="item" :dateTime="dateTime"></income-item>
			</block-view>
		</view>
  </view>
	
	<empty-status v-if="income.data == false" top="88rpx" src="/static/images/profit-empty.png" :note="`本月还没获得收益\n多发活动，See Wow一下`"></empty-status>
	
	<uni-load-more v-if="income.data.length > 7" :status="loadStatus"></uni-load-more>
	
	<uni-popup type="bottom" ref="dataPicker" :is-mask-click="false" :safe-area="false">
		<data-picker mode="date" :disabled-over-date="true" @cancel="$popupChange(this, 'dataPicker')" @confirm="dateChange"></data-picker>
	</uni-popup>
	<uni-popup type="center" ref="applyPopup" :is-mask-click="false">
		<view class="apply-content">
			<view class="close-icon" @click="$popupChange(this,'applyPopup')"><uni-icons type="closeempty" :size="18" color="#666"></uni-icons></view>
			<view class="title">请联系客服人员</view>
			<image class="service-code" src="/static/images/service-code.jpg" mode="widthFix"></image>
			<view class="ipt-wrapper">
				<input class="ipt" type="number" placeholder="请输入提现金额" v-model="money" />
			</view>
			<view class="accunt-info" v-if="userStore.isChooseWithdrawAccount">
				<view>您有多个账户信息，请确认你要提现的账户</view>
				<radio-group @change="radioChange">
					<view class="radio-wrapper">
						<label class="label-radio">
							<radio :value="2" style="transform: scale(0.7);" 
							color="#00CAC0" /><text>个人账户</text>
						</label>
						<label class="label-radio">
							<radio :value="3" style="transform: scale(0.7);" 
							color="#00CAC0" /><text>商户认证账户</text>
						</label>
					</view>
				</radio-group>
			</view>
			<button class="btn apply-btn" :class="{'disabled-class': btnDisabled}" :disabled="btnDisabled" @click="submitWithdrawal()">申请提现</button>
			<!-- 协议 -->
			<checkbox-group @change="checkChange">
				<view class="protocol-wrapper">
					<label class="label-check">
						<checkbox style="transform: scale(0.7);" :value="1" :checked="isChecked"
						activeBackgroundColor="#00CAC0" icon-color="#fff" />
						<text>我已阅读并同意</text>
					</label>
					<text class="theme-color" @click="checkProto()">《See Wow服务协议》</text>
				</view>
			</checkbox-group>
		</view>
	</uni-popup>
</template>

<script>
	import { useUserStore } from '../../../store/userStore';
	import incomeItem from '../components/income-item.vue';

	export default {
		components: {
			incomeItem
		},
		data() {
			return {
				userStore: useUserStore(),
				money: '', // 提现金额
				cash_type: 0, // 提现类型，默认0 不选择账户 2: 个人账户，3: 商户账户
				isChecked: false,
				dateTime: '',
				income: {
					page: 1,
					hasMore: false,
					data: [],
					total: 0, // 此月总收入
				},
				loadStatus: 'more'
			}
		},
		computed: {
			btnDisabled() {
				let b = false
				if (!this.money || Number(this.money) <= 0 || Number(this.money) > this.userStore.userInfo.current_money) {
					b = true
				} else if (this.userStore.isChooseWithdrawAccount && this.cash_type == 0) {
					b = true
				}
				return b
			}
		},
		onLoad() {
			this.dateTime = this.initDate(false)
			this.getProfitList()
			this.userStore.diffCash() // 对比个人账户与商户账户是否一致
		},
		onReachBottom() {
			if (this.income.hasMore) {
				this.loadStatus = 'loading'
				this.getProfitList()
			} else {
				this.loadStatus = 'noMore'
			}
		},
		watch: {
			money(val) {
				if (val > this.userStore.userInfo.current_money) {
					uni.showToast({
						title: '金额不能超过账户可提现金额',
						icon: 'none'
					})
				}
			}
		},
		methods: {
			raffleVerify() {
				uni.navigateTo({
					url: '/pages/raffle/verify'
				})
			},
			async submitWithdrawal() {
				if (!this.isChecked) {
					uni.showToast({
						title: '请勾选同意服务协议',
						icon: 'none'
					})
					return
				}
				const res = await this.$request.post('/api/money/cash', {money: this.money, cash_type: this.cash_type})
				if (res.code == 200) {
					this.$refs.applyPopup.close()
					uni.showToast({
						title: '已提交提现申请，请等待审核',
						icon: 'none'
					})
					this.userStore.userInfo.current_money = (this.userStore.userInfo.current_money - this.money).toFixed(2)
				}
			},
			// 申请
			apply() {
				this.$refs.applyPopup.open()
			},
			// 选择账户
			checkChange(e) {
				const { value } = e.detail
				this.isChecked = value != false ? true : false
			},
			// 查看协议
			checkProto() {
				uni.navigateTo({
					url: '/pages/proto/index?type=3'
				})
			},
			radioChange(e) {
				this.cash_type = e.detail.value
			},
			// 获取收入列表
			async getProfitList(refresh = false) {
				const res = await this.$request.get('/api/money/lists', {
					page: this.income.page,
					date: this.dateTime
				})
				if (res.code == 200) {
					this.loadStatus = 'more'
					this.income.hasMore = res.data.has_more_page
					this.income.total = res.data?.total_money || 0
					const list = res.data?.lists || []
					if (refresh) {
						this.income.data = list
					} else {
						this.income.data = this.income.data.concat(list)
					}
				}
			},
			// 选择月份
			dateChange(data) {
				this.dateTime = data.val
				this.$refs.dataPicker.close()
				this.getProfitList(true)
			},
			// 初始化日期，设置为当天时间
			initDate(showDay = true) {
			  let t = ''
			  const date = new Date()
			  const year = date.getFullYear(),
			    month = date.getMonth() + 1,
			    day = date.getDate()
			  const m = month < 10 ? ('0' + month) : month,
			    d = day < 10 ? ('0' + day) : day
			  
			  if (showDay) {
			    t = `${year}-${m}-${d}`
			  } else {
			    t = `${year}-${m}`
			  }
			  return t
			},
		},
	}
</script>

<style scoped lang="scss">
	.profit-wrapper {
		padding: 32rpx 30rpx;
	}
	.jiebei-wrapper {
		background: linear-gradient(45deg,#08C0CC 40%,#4DE2D2,#E7E0FD);
		border-radius: 20rpx;
		padding: 0 40rpx;
		color: #fff;
		// height: 168rpx;
		.info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 0 24rpx;
	    .left {
				display: flex;
				flex-direction: column;
		
				.name {
					font-size: 24rpx;
					font-weight: 500;
				}
		
				.nums-wrapper {
					margin-top: 4rpx;
					display: flex;
					align-items: center;
		
					.nums {
						color: #fff;
						font-size: 48rpx;
						font-weight: 500;
					}
		
					.note {
						font-size: 24rpx;
						padding-left: 8rpx;
					}
				}
			}
	    
			.right {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #666;
				width: 220rpx;
				height: 64rpx;
				background: linear-gradient(to right, #DFFF88, #6BFAFF);
				border-radius: 32rpx;
				font-size: 28rpx;
				color: #235759;
				border: 1px solid #fff;
			}
		}
		
	  .withdraw-wrapepr {
	    display: flex;
	    align-items: center;
	    padding: 24rpx 0 32rpx;
	    border-top: 1px solid rgba($color: #fff, $alpha: 0.5);
	
	    .item {
				flex: 1;
	      display: flex;	      
				flex-direction: column;
	      .title {
	        font-size: 24rpx;
	        padding-right: 16rpx;
	      }
	      .note {
	        font-size: 40rpx;
	        color: #fff;
	        font-weight: 500;
					margin-top: 8rpx;
	      }
	    }
	  }
	}

	.modify-wrapper {
		padding: 0 8rpx;
		.inner-wrapper {
			background-color: rgba($uni-color-primary, $alpha: 0.1);
			padding: 36rpx 0 24rpx;
			position: relative;
			border-radius: 0 0 24rpx 24rpx;
			margin-top: -12rpx;
			display: flex;
			align-items: center;
			.item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: $uni-color-primary;
				
				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}
		}
	}

	.profit-detail {
		margin-top: 40rpx;
		position: relative;
		.title {
			font-size: 32rpx;
			font-weight: 500;
			padding-bottom: 24rpx;
		}
		.verify-btn{
			display: block;
			width: 196rpx;
			height: 56rpx;
			position: absolute;
			background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_verify_btn.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			top:0;
			right: 0;
		}
		
		.header-wrapper {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 0;
			.left {
				display: flex;
				align-items: center;
				font-size: 40rpx;
				font-weight: 500;
				.date {
					padding-right: 6rpx;
				}
			}
			.right {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-weight: 500;
			}
		}
	}
	
	.apply-content {
		border-radius: 24rpx;
		width: 600rpx;
		// height: 800rpx;
		background: linear-gradient(175deg, rgba(241,246,247, 0), #F1F6F7, #F1F6F7, #F1F6F7),linear-gradient(to right, #B0F9EF, #A7F4FB);
		position: relative;
		display: flex;
		flex-direction: column;
		padding: 60rpx 30rpx;
		align-items: center;
		.close-icon {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
		.title {
			font-size: 32rpx;
			font-weight: 500;
		}
		.service-code {
			width: 260rpx;
			height: 260rpx;
			margin: 40rpx 0;
		}
		.ipt-wrapper {
			margin-bottom: 24rpx;
			height: 80rpx;
			width: 472rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			border-radius: 16rpx;
			.ipt {
				width: 100%;
				font-size: 26rpx;
				font-weight: 500;
				text-align: center;
			}
		}
		.apply-btn {
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			background-color: $uni-color-primary;
			color: #fff;
			font-size: 32rpx;
			width: 472rpx;
		}
		.accunt-info {
			font-size: 26rpx;
			.radio-wrapper {
				display: flex;
				align-items: center;
				justify-content: center;
				// font-size: 26rpx;
				margin: 24rpx 0;
				.label-radio {
					display: flex;
					align-items: center;
					&:first-child {
						margin-right: 100rpx;
					}
				}
			}
		}
		
		.protocol-wrapper {
			margin-top: 32rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			.theme-color {
				color: $uni-color-primary;
			}
			.label-check {
				display: inline-flex;
				align-items: center;
			}
			
		}
	}

	
</style>